<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			td{
				width: 50px;
				height: 50px;
				background-color: black
			}
			#time{
				margin-top: 10px;
				text-align: center;
				line-height: 30px;
				height: 30px;
				border: 1px solid black;
				/*width: 100%;*/
			}
			button{
				width: 100%;
			}
			#main{
				margin: auto;
			}
			table{
				display: block;
			}
		</style>
		
	</head>

	<body>
		<div id="main">
			<table border="1" cellspacing="" cellpadding="">
					<tbody id="tbo">
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<div id="time">
					
				</div>
				<button id="btn" type="button" style="display: none;" onclick="jixu()">下一关</button>
				<div id="guanshu"></div>
		</div>
		<script type="text/javascript">
			var cishu=0;
			var trs = document.getElementsByTagName("tr");

//		window.onload=function(){
			
			var tds = document.getElementsByTagName("td");
			var div = document.getElementById("time");
			for (var i = 0;i<tds.length;i++) {
				tds[i].onclick = changeColor;
			}
			function changeColor(){
				var td = this.cellIndex;
				var tr = this.parentNode.rowIndex;
				for (var i=0;i<tds.length;i++) {
					if (tds[i].cellIndex == td || tds[i].parentNode.rowIndex == tr) {
						var tdColor = document.defaultView.getComputedStyle(tds[i],null).backgroundColor;
						if (tdColor == "rgb(0, 0, 0)") {
							tds[i].style.backgroundColor = "#ffffff";
						} else{
							tds[i].style.backgroundColor = "#000000";
						}
					}
				}
				cishu++;
				div.innerHTML ="点击了： "+ cishu+"次";
				var c = 1;
				var ans = passBarrier();
				if (ans == 0) {
					div.innerHTML = "成功"+" "+" 点击了"+cishu+"次";
					var btn = document.getElementById("btn");
					btn.style.display ="block";
				}
			}
			
//			console.log(answear)
//			var answear = passBarrier();
			function passBarrier(){
				var ret = 0;
				for (var i = 0;i<tds.length;i++) {
				var tdColor = document.defaultView.getComputedStyle(tds[i],null).backgroundColor;
					if (tdColor == "rgb(0, 0, 0)") { 
						ret = 1;
						break;
					}
				}
				if (ret == 0) {
					return 0;
				}
			}
			
//		}
		function jixu(){
			var btn = document.getElementById("btn");
			var tr = document.createElement("tr");
			var tbo = document.getElementById("tbo");
			var tds  =document.getElementsByTagName("td");
			//将所有格子变黑色
			for (var i = 0;i<tds.length;i++) {
				tds[i].style.backgroundColor = "#000000";
			}
			//每行里添加一个td
			for (var i =0;i<trs.length;i++) {
					var td = document.createElement("td");
					td.onclick = changeColor;
					trs[i].appendChild(td);
				}
				//行追加td后的列数
				var tds = trs[0].getElementsByTagName("td");
				tbo.appendChild(tr);			//像tbody里追加一行
				//向此行里添加td
				for (var i = 0;i<tds.length;i++) {
					var td = document.createElement("td");
					td.onclick = changeColor;
					tr.appendChild(td);
				}
				cishu = 0;
				btn.style.display="none";
			}	
		</script>
	</body>

</html>